<template>
  <div class="home">
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <div>
      燕燕于飞，差池其羽。之子于归，远送于野。瞻望弗及，泣涕如雨。
      燕燕于飞，颉之颃之。之子于归，远于将之。瞻望弗及，伫立以泣。
      燕燕于飞，下上其音。之子于归，远送于南。瞻望弗及，实劳我心。
      仲氏任只，其心塞渊。终温且惠，淑慎其身。先君之思，以勖寡人。
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      screenHW: window.orientation, // 判断横竖屏
      isScreen: true, // 横竖屏
    };
  },

  mounted () {
    console.log("window.orientation:",window.orientation);
    this.screenHW = window.orientation  //保证刷新时获取状态准确
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenHW = window.orientation   // 把横竖屏的变化赋值
      })()
    }

    // 监听 resize 方法
    // window.addEventListener("resize", this.renderResize, false)
  },
  watch: {
    screenHW: {
      immediate: true,
      handler(newval, old) {
        this.rotate();
      }

    }
  },
  // beforeDestroy () {
  //   // 移除监听
  //   window.removeEventListener("resize", this.renderResize, false)
  // },
  methods: {
    // renderResize() {
    //   // console.log("window.orientation:",window.orientation);
    //   // 判断横竖屏
    //   let width = document.documentElement.clientWidth
    //   let height = document.documentElement.clientHeight
    //   if (width > height) {
    //     alert('横屏')
    //   }
    //   // 做页面适配
    //   // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在 this.$nextTick() 里进行。
    // }



    // 判断横竖屏
    rotate() {
      console.log("screenHW",this.screenHW);
      // if (this.screenHW == 180 || this.screenHW == 0) {
      //   // console.log('竖屏')
      //   alert('竖屏');
      //   this.isScreen = true
      // } else if (this.screenHW == 90 || this.screenHW == -90) {
      //   // console.log('横屏')
      //   alert('横屏');
      //   this.isScreen = false
      // }
    }
  }

}
</script>
<style>


</style>